<script setup>
import { ref, reactive, onMounted } from 'vue'

// 统计数据
const statistics = ref([
  { title: '订单总数', value: 6580, icon: 'ShoppingCart', color: '#40c9c6' },
  { title: '商品总数', value: 1356, icon: 'ShoppingBag', color: '#36a3f7' },
  { title: '用户总数', value: 3721, icon: 'User', color: '#f4516c' },
  { title: '今日销售额', value: '￥12,380', icon: 'Money', color: '#34bfa3' }
])

// 近期订单数据
const recentOrders = ref([
  { id: 'DD2023071001', user: '张三', amount: '￥398.00', status: '已支付', time: '2023-07-10 15:30:24' },
  { id: 'DD2023071002', user: '李四', amount: '￥127.50', status: '已发货', time: '2023-07-10 16:12:33' },
  { id: 'DD2023071003', user: '王五', amount: '￥1,243.00', status: '待支付', time: '2023-07-10 16:47:21' },
  { id: 'DD2023071004', user: '赵六', amount: '￥568.00', status: '已完成', time: '2023-07-10 17:10:05' },
  { id: 'DD2023071005', user: '钱七', amount: '￥97.50', status: '已支付', time: '2023-07-10 17:25:48' }
])

// 时间范围选择
const timeRange = ref('week')

// 模拟图表数据
const chartData = ref({
  xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  seriesData: [
    {
      name: '订单量',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '销售额',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
})

onMounted(() => {
  // 这里可以添加初始化图表或获取后端数据的逻辑
})
</script>

<template>
  <div class="dashboard-container">

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <el-card v-for="(item, index) in statistics" :key="index" class="stat-card" :body-style="{ padding: '20px' }">
        <div class="card-content">
          <div class="card-icon" :style="{ backgroundColor: item.color }">
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="card-info">
            <div class="card-value">{{ item.value }}</div>
            <div class="card-title">{{ item.title }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表展示区域 -->
    <div class="chart-section">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="16">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>销售统计</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                  <el-radio-button label="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container" ref="salesChart">
              <!-- 这里需要引入实际的图表组件 -->
              <div class="chart-placeholder">
                <div class="chart-lines">
                  <div v-for="(item, index) in chartData.seriesData[0].data" :key="index" class="chart-line"
                    :style="{ height: `${item / 3}px`, backgroundColor: '#36a3f7' }"></div>
                </div>
                <div class="chart-labels">
                  <div v-for="(label, index) in chartData.xAxisData" :key="index" class="chart-label">
                    {{ label }}
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :sm="24" :lg="8">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>商品分类占比</span>
              </div>
            </template>
            <div class="chart-container" ref="categoryPieChart">
              <!-- 这里需要引入实际的图表组件 -->
              <div class="pie-placeholder">
                <div class="pie-circle"></div>
                <div class="pie-legend">
                  <div class="legend-item">
                    <span class="color-dot" style="background-color: #36a3f7;"></span>
                    <span>电子产品 (32%)</span>
                  </div>
                  <div class="legend-item">
                    <span class="color-dot" style="background-color: #40c9c6;"></span>
                    <span>服装 (28%)</span>
                  </div>
                  <div class="legend-item">
                    <span class="color-dot" style="background-color: #f4516c;"></span>
                    <span>食品 (22%)</span>
                  </div>
                  <div class="legend-item">
                    <span class="color-dot" style="background-color: #34bfa3;"></span>
                    <span>图书 (18%)</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近订单表格 -->
    <el-card class="recent-orders">
      <template #header>
        <div class="card-header">
          <span>最近订单</span>
          <el-button type="text">查看更多</el-button>
        </div>
      </template>
      <div class="table-responsive">
        <el-table :data="recentOrders" style="width: 100%" stripe>
          <el-table-column prop="id" label="订单号" min-width="180" />
          <el-table-column prop="user" label="客户" min-width="120" />
          <el-table-column prop="amount" label="金额" min-width="120" />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="创建时间" min-width="180" />
          <el-table-column label="操作" min-width="120">
            <template #default>
              <div class="action-buttons">
                <el-button type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
// 获取订单状态对应的标签类型
function getStatusType(status) {
  switch (status) {
    case '已支付':
      return 'success'
    case '已发货':
      return 'primary'
    case '待支付':
      return 'warning'
    case '已完成':
      return 'info'
    default:
      return 'info'
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  width: 100%;
}

.page-title {
  margin-bottom: 20px;
  font-weight: 500;
  color: #303133;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px 20px;
}

.stat-card {
  flex: 1;
  min-width: 220px;
  margin: 0 10px 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.card-info {
  margin-left: 15px;
  overflow: hidden;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.chart-section {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-container {
  height: 350px;
  width: 100%;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.action-buttons {
  display: flex;
  gap: 5px;
}

/* 图表占位样式 */
.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-lines {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 20px;
}

.chart-line {
  width: 30px;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s;
}

.chart-labels {
  height: 30px;
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
}

.chart-label {
  text-align: center;
  color: #909399;
}

.pie-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pie-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(#36a3f7 0% 32%,
      #40c9c6 32% 60%,
      #f4516c 60% 82%,
      #34bfa3 82% 100%);
  margin-bottom: 20px;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.recent-orders {
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .stat-card {
    flex-basis: calc(50% - 20px);
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .stat-card {
    flex-basis: calc(100% - 20px);
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-container {
    height: 300px;
  }

  .pie-circle {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 576px) {
  .chart-line {
    width: 20px;
  }

  .chart-container {
    height: 250px;
  }

  .pie-circle {
    width: 120px;
    height: 120px;
  }

  .card-value {
    font-size: 20px;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style>
